<template>
	<div class="box">
		<div class="block">
			<div class="first">
				<div class="title">
					我们的核心账户
				</div>
				<div>
					<div v-for="(item, index) in list" :key="index" class="flex item">
						<img :src="item.img" class="img">
						<div class="content">
							<p>{{ item.title }}</p>
							<p>{{ item.desc }}</p>
						</div>
					</div>
				</div>
			</div>
			<div class="bigImg">
				<img src="/home/big-1.png" alt="" class="w-500px">
			</div>
		</div>
		<div class="block second">
			<div class="bigImg">
				<img src="/home/big-2.png" alt="" class="w-500px">
			</div>
			<div>
				<p class="title">随时随地,开启交易</p>
				<div class="code">
					<div>
						<el-image style="width: 180px; height: 180px" src="/header/code2d.svg" fit="fill" />
					</div>
					<p class="font">
						扫码下载APP
					</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
const list = ref<any>([
	{
		title: '现货',
		desc: '我们提供300+币种的交易服务',
		img: '/home/home-spot.svg'
	},
	{
		title: '合约',
		desc: '多种以USDT和加密货币结算的合约',
		img: '/home/home-contract.svg'
	},
	{
		title: '理财',
		desc: '支持300+加密货币，活期定期随心选',
		img: '/home/home-conduct.svg'
	}
])
</script>
<style scoped lang="scss">
.box {
	.block {
		display: flex;
		margin-bottom: 10vh;

		>div {
			width: 50%;
		}

		.title {
			font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
			font-size: 4rem;
			font-weight: 900;
		}

		.first {
			.item {
				margin-top: 40px;

				.img {
					width: 80px;
					height: 80px;
				}

				.content{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-left: 20px;

					>p:nth-child(1){
						font-size: 2rem;
					}

					>p:nth-child(2){
						font-size: 1rem;
						color: #999;
					}
				}
			}

		}

		.bigImg{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.second {
		>div:nth-child(2){
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.code{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			>div{
				padding: 20px;
				margin-top: 40px;
				border: 1px solid rgb(250 215 215);
				border-radius: 8px;
			}

			.font{
				margin: 20px 0;
				font-weight: bold;
			}
		}
	}
}
</style>
